<template>
  <div class="barEcharts">
    <chart :options="option" v-if="this.option.series.length > 0"></chart>
    <VNoData v-else></VNoData>
  </div>
</template>

<script type="text/ecmascript-6">
  import store from './../../../../../store'
  import VNoData from '../../../../../components/VNoData/VNoData'

  export default {
    name: 'barEcharts',
    components: { VNoData },
    data () {
      return {
        option: {
          height: 200,
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [],
            type: 'scroll'
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: []
        },
        groupList: []
      }
    },
    computed: {
      chartType () {
        return store.state.graphicValue
      },
      chartList () {
        return store.state.chartList
      }
    },
    watch: {
      chartType (val) {
        this.option.series.forEach(item => {
          item.type = val
        })
      },
      chartList (arr) {
        let list = []
        if (arr.length > 0) {
          arr.forEach(item => {
            for (let i = 0; i < this.groupList.length; i++) {
              if (this.groupList[i].value.indexOf(item.code_value_nm_cns) !== -1) {
              // if (this.groupList[i].value.split(',')[0] === item.code_value_nm_cns) {
                list.push(this.groupList[i])
              }
            }
          })
          this.setChartData(list)
        } else {
          this.option.series = []
        }
      }
    },
    methods: {
      getChartData (object) {
        if (!object) { // 如果传过来的数据为空，清空数据，隐藏echart表
          this.option.series = []
          return
        }
        // x轴数据
        this.option.xAxis[0].data = object.date_list
        // echarts头部数据
        this.groupList = []
        object.group_list.forEach(obj => {
          object.chartList.forEach(item => {
            this.groupList.push({key: obj + ',' + item.key, value: obj + ',' + item.value})
          })
        })
        // echarts数据
        this.groupList.forEach(obj => {
          obj.data = []
          let num = 0
          object.date_list.forEach(date => {
            let sameDay = []
            object.data.forEach(item => {
              if (date === item.MC000154__GSD) {
                sameDay.push(item)
              }
            })
            sameDay.forEach(item => {
              let gs = []
              for (let key in item) {
                if (key.indexOf('__GS__') !== -1) {
                  gs[key.split('__')[2]] = item[key]
                }
              }
              if (obj.key.indexOf(gs.join(',')) !== -1) {
                for (let key in item) {
                  if (key.indexOf('__GF__') !== -1 && key.indexOf('__PERCENT__') === -1) {
                    if (obj.key.indexOf(key.split('__GF__')[0]) !== -1) {
                      num = item[key]
                    }
                  }
                }
              }
            })
            obj.data.push(num)
          })
        })
      },
      setChartData (list) {
        this.option.legend.data = []
        this.option.series = []
        list.forEach(item => {
          this.option.legend.data.push(item.value)
          let obj = {}
          obj.name = item.value
          obj.data = item.data
          obj.type = this.chartType
          this.option.series.push(obj)
        })
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .barEcharts
    .echarts
      position static
      width 100%
</style>
